<!-- 客户详情 -->
<template>
    <view>
        <status-bar title='客户详情' :goHome='fromShare'></status-bar>
        <view class="top p-left30 p-right30 white" :style="{backgroundImage:'url(' + imgUrl + 'Uploads/private/cd_bg1.png' + ')'}">
            <view class="p-re">
                <view class="p-top30 d-flex">
                    <u-avatar :src="$imgUrls(pageData.v_headimg)" size="50"></u-avatar>
                    <view class="m-left20">
                        <view class="size28 bold m-bot12">{{ pageData.v_name }}</view>
                        <view class="size26 m-bot10">{{ pageData.v_tel }}</view>
                        <view class="ellipsis">
                            <text class="label" @click="handleSort">{{ pageData.group ? pageData.group.name : '选择个性分类'}}</text>
                            <text class="label" v-for="(item,index) in pageData.tags" :key="index" :style="{background: item.color}">{{ item.name }}</text>
                        </view>
                    </view>
                </view>
                <view class="d-flex p-right20 p-ab" style="top: 0; right: 0;">
                    <view class="p-top12 bold text-center" v-if="pageData.next_birthday != '未知'">
                        <view class="size26">生日</view>
                        <view class="size26">{{ pageData.next_birthday }}天后</view>
                    </view>
                    <view class="climate m-left30 bold text-center">
                        <view class="size26">{{ pageData.chineseCalendar.term }}</view>
                        <view class="size26">{{ pageData.chineseCalendar.info }}</view>
                    </view>
                </view>
            </view>
            <view class="m-top60 d-flex j-sb">
                <view class="btn bgwhite bor_radius_6 text-center" @click="toUrl('/privatePage/client/basicInfo?guest_id=' + guest_id)">
                    <text class="size22 color_44">基本信息</text>
                    <image :src="imgUrl + 'Uploads/private/cd_icon1.png'" mode="widthFix"></image>
                </view>
                <view class="btn bgwhite bor_radius_6 text-center" @click="toUrl('/privatePage/client/order?guest_id=' + guest_id)">
                    <text class="size22 color_44">客户订单</text>
                    <image :src="imgUrl + 'Uploads/private/cd_icon2.png'" mode="widthFix"></image>
                </view>
                <view class="btn bgwhite bor_radius_6 text-center" @click="toUrl('/privatePage/client/prefer?guest_id=' + guest_id)">
                    <text class="size22 color_44">喜爱偏好</text>
                    <image :src="imgUrl + 'Uploads/private/cd_icon3.png'" mode="widthFix"></image>
                </view>
                <view class="btn bgwhite bor_radius_6 text-center" @click="toUrl('/privatePage/client/remarks?guest_id=' + guest_id)">
                    <text class="size22 color_44">沟通备注</text>
                    <image :src="imgUrl + 'Uploads/private/cd_icon4.png'" mode="widthFix"></image>
                </view>
            </view>
        </view>
        <view class="padding30">
            <view class="d-flex j-sb">
                <view class="count p-re bor_radius_6 white p-top16 p-left18" style="background: linear-gradient(0deg, #4D7FFF, #435CE6);">
                    <view class="h7 m-bot4">今日活跃值</view>
                    <view class="size36 bold800 m-bot16">{{ pageData.today_views || 0 }}</view>
                    <view><text class="h6 m-right10">累计</text><text class="size26">{{ pageData.total_views || 0 }}</text></view>
                    <image class="icon p-ab" :src="imgUrl + 'Uploads/private/cd_bg2.png'" mode="widthFix" style="width: 128rpx;"></image>
                </view>
                <view class="count p-re bor_radius_6 white p-top16 p-left18" style="background: linear-gradient(0deg, #FF868D, #F0478A);">
                    <view class="h7 m-bot4">今日消费</view>
                    <view class="size36 bold800 m-bot16">{{ pageData.today_money || 0 }}</view>
                    <view><text class="h6 m-right10">累计</text><text class="size26">{{ pageData.total_money || 0 }}</text></view>
                    <image class="icon p-ab" :src="imgUrl + 'Uploads/private/cd_bg3.png'" mode="widthFix" style="width: 168rpx;"></image>
                </view>
                <view class="count p-re bor_radius_6 white p-top16 p-left18" style="background: linear-gradient(0deg, #F3B351, #FF6E17);">
                    <view class="h7 m-bot4">今日下单</view>
                    <view class="size36 bold800 m-bot16">{{ pageData.today_order || 0 }}</view>
                    <view><text class="h6 m-right10">累计</text><text class="size26">{{ pageData.total_order || 0 }}</text></view>
                    <image class="icon p-ab" :src="imgUrl + 'Uploads/private/cd_bg4.png'" mode="widthFix" style="width: 120rpx;"></image>
                </view>
            </view>
            <view class="flexac">
                <u-tabs :list="tabList" :lineColor="color" lineWidth="32" @click="tabClick" itemStyle="height: 50px;"
                    :inactiveStyle="{color:'#777',fontSize:'32rpx',transform:'scale(1)'}"
                    :activeStyle="{color:'#444',fontSize:'32rpx',fontWeight:'bold',transform:'scale(1.05)'}"></u-tabs>
            </view>
            <view class="card bgwhite bor_radius_6 padding20 m-top40">
                <view class="size30 color_22 bold">24小时{{ activeName }}趋势</view>
                <column :raw-data="active ? chartData.day_order_chart : chartData.day_views_chart" :item-count="8"></column>
                <view class="size30 color_22 bold text-center m-top40 m-bot40">品类{{ activeName }}比</view>
                <ring :raw-data="active ? chartData.day_order_pie : chartData.day_views_pie"></ring>
            </view>
            <view class="card bgwhite bor_radius_6 padding20 m-top40">
                <view class="size30 color_22 bold">月{{ activeName }}趋势</view>
                <column :raw-data="active ? chartData.month_order_chart : chartData.month_views_chart" :item-count="6"></column>
                <view class="size30 color_22 bold text-center m-top40 m-bot40">品类{{ activeName }}比</view>
                <ring :raw-data="active ? chartData.month_order_pie : chartData.month_views_pie"></ring>
            </view>
            <view class="card bgwhite bor_radius_6 padding20 m-top40 m-bot10">
                <view class="size30 color_22 bold">年{{ activeName }}趋势</view>
                <column :raw-data="active ? chartData.year_order_chart : chartData.year_views_chart"></column>
                <view class="size30 color_22 bold text-center m-top40 m-bot40">品类{{ activeName }}比</view>
                <ring :raw-data="active ? chartData.year_order_pie : chartData.year_views_pie"></ring>
            </view>
        </view>
        <!-- 个性分类弹窗 -->
        <u-picker :show="showPicker" :columns="columnData" keyName="name" @confirm="handleConfirm" @cancel="showPicker = false"></u-picker>
    </view>
</template>

<script>
import column from '../components/column.vue'
import ring from '../components/ring.vue'
import { mapState } from 'vuex'
export default {
    data(){
        return {
            fromShare: 0,
            imgUrl: this.imgUrl,
            tabList: [
                { name: '活跃度' },
                { name: '交易' }
            ],
            active: 0,
            guest_id: '',
            pageData: '',
            chartData: '',
            showPicker: false,
            columns: []
        }
    },
    computed: {
        ...mapState(['color']),
        activeName(){
            return this.active ? '交易' : '活跃'
        },
        columnData(){
            return this.pageData.group ? [[...this.columns,{ group_id: '', name: "移除当前分组"}]] : [ this.columns ]
        }
    },
    components: {
        column,
        ring
    },
    onLoad(e){
        if(e.guest_id) this.guest_id = e.guest_id
        this.getDetail()
        this.initChart()
    },
    onShow(){
        this.getColumns()
    },
    methods: {
        getDetail(){
            this.$http.get({
                url: '/PrivateSphereApi/guestDetail',
                data: {
                    guest_id: this.guest_id
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.pageData = res.data
            })
        },
        initChart(){
            this.$http.get({
                url: '/PrivateSphereApi/guestStatistics',
                data: {
                    guest_id: this.guest_id
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.chartData = res.data
            })
        },
        tabClick({index}){
            console.log(index)
            this.active = index
        },
        getColumns(){
            this.$http.get({
                url: '/PrivateSphereApi/GuestGroupList'
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.columns = res.data || []
            })
        },
        handleSort(){
            if(this.columns.length) return this.showPicker = true
            this.$Modal('提示', '当前暂无个性分类，是否去添加？').then(res=>{
                if(!res) return
                this.toUrl('/privatePage/single/subgroup')
            })
        },
        handleConfirm({value}){
            if(value[0].group_id){ // 加入分组
                this.$http.post({
                    url: '/PrivateSphereApi/editGuestToGroup',
                    data: {
                        guest_id: this.guest_id,
                        group_id: value[0].group_id
                    }
                }).then(res=>{
                    if(res.code != 200) return this.$Toast(res.msg)
                    this.showPicker = false
                    this.getDetail()
                })
            } else{ // 移除分组
                this.$http.post({
                    url: '/PrivateSphereApi/delGuestFromGroup',
                    data: {
                        guest_id: this.guest_id,
                        group_id: this.pageData.group.id
                    }
                }).then(res=>{
                    if(res.code != 200) return this.$Toast(res.msg)
                    this.showPicker = false
                    this.getDetail()
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.top {
    height: 340rpx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    .climate {
        height: 90rpx;
        padding: 12rpx 6rpx;
        background: #A8C2FF;       
        border-radius: 0rpx 0rpx 8rpx 8rpx;
    }
    .label {
        display: inline-block;
        padding: 0 12rpx;
        height: 34rpx;
        line-height: 34rpx;
        border-radius: 6rpx;
        font-size: 20rpx;
        margin: 0 12rpx 6rpx 0;
        background: #8590FF;
    }
    .btn {
        width: 150rpx;
        line-height: 56rpx;
        image {
            width: 40rpx;
        }
    }
}
.count {
    width: 210rpx;
    height: 160rpx;
    .icon {
        right: 0;
        bottom: 0;
        z-index: 10;
    }
}
.card {  
    box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(0,0,0,0.1);
}
</style>